<template>
  <button
    :class="[
      'q-button',
      `q-button--${type}`,
      mimicry ? 'is-mimicry' : '',
      plain ? 'is-plain' : '',
      round ? 'is-round' : '',
      circle ? 'is-circle' : '',
      disabled ? 'is-disabled' : '',
      glass ? 'is-glass' : '',
      loading ? 'is-loading' : '',
    ]"
    :disabled="disabled"
    @click="handleClick"
  >
    <i v-if="loading" class="q-icon-icon_loading"></i>
    <i v-if="!loading && icon" :class="`q-icon-${icon}`"></i>
    <!-- 如果没传入文本插槽，则不显示span内容 -->
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
/**
 * 模型简化 弹窗
 * @description
 * @property {Boolean}        visible         显示弹窗
 * @property {String}         title           标题
 * @property {String|Number}  width           弹窗宽度(默认'363px')
 * @property {String|Number}  height          弹窗高度(默认auto)
 * @event    {Function}       cancel          关闭弹窗触发，当前组件为右上角x号
 */
export default {
  name: 'QButton',
  data() {
    return {}
  },
  methods: {
    handleClick(e) {
      this.$emit('click', e)
    }
  },
  components: {},
  props: {
    // 按钮类型
    type: {
      type: String,
      default: 'default',
      // type值校验
      validator: function (value) {
        return (
          [
            'default',
            'success',
            'primary',
            'danger',
            'warning',
            'info'
          ].indexOf(value) !== -1
        )
      }
    },
    // 拟态
    mimicry: {
      type: Boolean,
      default: false
    },
    // 朴素按钮
    plain: {
      type: Boolean
    },
    // round按钮
    round: {
      type: Boolean
    },
    // 圆形按钮
    circle: {
      type: Boolean
    },
    // icon
    icon: {
      type: String,
      default: ''
    },
    // disabled禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 玻璃态
    glass: {
      type: Boolean,
      default: false
    },
    // loading
    loading: {
      type: Boolean,
      default: false
    }
  },
  created() {},
  mounted() {},
  computed: {},
  watched: {}
}
</script>
<style lang="scss">
$normal-color: #fff;
$normal-active-color: #409eff;
$primary-color: #409eff;
$primary-active-color: #66b1ff;
$info-color: #909399;
$info-active-color: #a6a9ad;
$success-color: #67c23a;
$success-active-color: #85ce61;
$warning-color: #e6a23c;
$warning-active-color: #ebb563;
$danger-color: #f56c6c;
$danger-active-color: #f78989;
.q-button {
  display: inline-block;
  position: relative;
  font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
  line-height: 1;
  cursor: pointer;
  background-color: $normal-color;
  border: 1px solid #dcdfe6;
  white-space: nowrap;
  color: #606266;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  font-weight: 500;
  // 禁止文字被选中
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &:hover,
  &:focus {
    color: $normal-active-color;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}

.q-button--primary {
  color: #fff;
  background-color: $primary-color;
  border-color: $primary-color;
  //   box-shadow: inset 3px 6px 10px #337ecc, inset -3px -7px 10px #4dbeff;
  &:hover,
  &:focus {
    background: $normal-active-color;
    background-color: $normal-active-color;
    color: #fff;
  }
}
.q-button--success {
  color: #fff;
  background-color: $success-color;
  border-color: $success-color;
  &:hover,
  &:focus {
    background: $success-active-color;
    background-color: $success-active-color;
    color: #fff;
  }
}

.q-button--info {
  color: #fff;
  background-color: $info-color;
  border-color: $info-color;
  &:hover,
  &:focus {
    background: $info-active-color;
    background-color: $info-active-color;
    color: #fff;
  }
}
.q-button--warning {
  color: #fff;
  background-color: $warning-color;
  border-color: $warning-color;
  &:hover,
  &:focus {
    background: $warning-active-color;
    background-color: $warning-active-color;
    color: #fff;
  }
}
.q-button--danger {
  color: #fff;
  background-color: $danger-color;
  border-color: $danger-color;
  &:hover,
  &:focus {
    background: $danger-active-color;
    background-color: $danger-active-color;
    color: #fff;
  }
}
// 拟态
.q-button.is-mimicry {
  box-shadow: inset 3px 6px 10px #ccc, inset -3px -7px 10px #fff;
}
.q-button--primary.is-mimicry {
  box-shadow: inset 3px 6px 10px #337ecc, inset -3px -7px 10px #4dbeff;
}
.q-button--info.is-mimicry {
  box-shadow: inset 3px 6px 10px #73767a, inset -3px -7px 10px #adb0b8;
}
.q-button--success.is-mimicry {
  box-shadow: inset 3px 6px 10px #6aa54e, inset -3px -7px 10px #a0f774;
}
.q-button--warning.is-mimicry {
  box-shadow: inset 3px 6px 10px #bc914f, inset -3px -7px 10px #ffd977;
}
.q-button--danger.is-mimicry {
  box-shadow: inset 3px 6px 10px #c45656, inset -3px -7px 10px #ff8282;
}
// 朴素按钮
.q-button.is-plain {
  box-shadow: unset;
  &:hover,
  &:focus {
    background: #fff;
    border-color: #489eff;
    color: #409eff;
  }
}
.q-button--primary.is-plain {
  box-shadow: unset;
  color: #409eff;
  background: #ecf5ff;
  &:hover,
  &:focus {
    background: #409eff;
    border-color: #409eff;
    color: #fff;
  }
}
.q-button--success.is-plain {
  box-shadow: unset;
  color: #67c23a;
  background: #c2e7b0;
  &:hover,
  &:focus {
    background: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}
.q-button--info.is-plain {
  box-shadow: unset;
  color: #909399;
  background: #d3d4d6;
  &:hover,
  &:focus {
    background: #909399;
    border-color: #909399;
    color: #fff;
  }
}
.q-button--warning.is-plain {
  box-shadow: unset;
  color: #e6a23c;
  background: #f5dab1;
  &:hover,
  &:focus {
    background: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
}
.q-button--danger.is-plain {
  box-shadow: unset;
  color: #f56c6c;
  background: #fbc4c4;
  &:hover,
  &:focus {
    background: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}
// round圆角按钮
.q-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
}
// 圆形按钮
.q-button.is-circle {
  border-radius: 50%;
  padding: 12px;
}
// 玻璃态按钮
.q-button.is-glass {
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
}

// 按钮loading
.q-button.is-loading {
  position: relative;
  pointer-events: none;
}
.q-icon-icon_loading {
  display: inline-block;
  animation: moveIcon 3s linear infinite;
}
@keyframes moveIcon {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.q-button.is-loading:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.35);
}
// 让图标和文字之间空开
.q-button [class*="q-"] + span {
  margin-left: 5px;
}
// 禁用
.q-button.q-button.is-disabled .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(148, 146, 146, 0.39);
  left: 0;
  top: 0;
  box-shadow: 2px 2px 3px rgba(216, 213, 213, 0.3);
  border-radius: 4px;
  z-index: 100;
}
.q-button.is-round .mask {
  border-radius: 20px;
}

.q-button.is-circle .mask {
  border-radius: 50%;
}
.q-button.is-disabled {
  cursor: no-drop;
}
</style>
